
<template>
<div class="homeStruct detailedParent">
  <div class="detailed"><img src="../../../public/detailed.svg" alt="放大" @click="dialogVisible = true"></div>
  <div id="homeStruct-main"></div>
</div>
  <el-dialog v-model="dialogVisible" title="图表详情" width="80vw" height="height">
    <div>
      <DetailedHomeStruct></DetailedHomeStruct>
    </div>
  </el-dialog>
</template>

<style scoped>
.homeStruct{
  width: 100%;
  height: 100%;
}
#homeStruct-main{
  width: 100%;
  height: 100%;
}
</style>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import {getHomeStruct} from "@/api/homeStruct.js";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import {detailedHomeStructEvent, mapChanged} from "@/consts/eventName.js";
import emitter from "@/utils/emitter.js";
import DetailedAge from "@/components/DemographicCharacteristics/detailed/DetailedAge.vue";
import DetailedHomeStruct from "@/components/DemographicCharacteristics/detailed/DetailedHomeStruct.vue";
import theme from "../../../static/theme/walden.json";

let chartDom
let myChart
let option;

let detailedStore = useDetailedStore()
let dialogVisible = ref(false)


let init = {
  year:2023,
  city:"china"
}

onMounted(()=>{
  chartDom = document.getElementById('homeStruct-main');
  myChart = echarts.init(chartDom,theme);
  draw(init.city,init.year)
})

emitter.on(mapChanged,(value)=>{
  draw(value,init.year)

})

function draw(city,year){
  getHomeStruct(city,year).then((value)=>{
    let  data = value.data
    let res = []
    console.log(data)

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item));
      res.push({
        name:jsonMap.keys().next().value,
        value:jsonMap.values().next().value
      })
    })

    if (detailedStore.detailedLoadFlag.get(detailedHomeStructEvent)){
      emitter.emit(detailedHomeStructEvent, {
        city:city,
        value:res
      })
    }else {
      detailedStore.detailedData.set(detailedHomeStructEvent,{
        city:city,
        value:res
      })
    }

    return res
  }).then((value)=>{
    option = {
      title: {
        text: '家庭结构',
        left: 10
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '家庭结构',
          type: 'pie',
          radius: [20, 120],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: value
        },

      ]
    };

    option && myChart.setOption(option);
  })
}



</script>